<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="线路列表" navbarType='3'></wlk-navbar>
		<view class="line-content">
			<u-sticky>
				<view class="head-box">
					<u-search placeholder="请输入关键词/目的地" disabled v-model="keyword" :showAction="false"
						@click="jump(keyword)" :searchIconColor="themeColor" margin="0 0 30rpx 0"></u-search>
					<view class="wlkflex">
						<view class="tab-item center" @click="changeOrder('default')"
							:style="order=='default'?'color:'+themeColor:''">默认</view>
						<view class="tab-item center" @click="changeOrder('sales')"
							:style="order=='sales'?'color:'+themeColor:''">销量</view>
						<view class="tab-item center wlkflex justify-center" @click="changeOrder('price')">
							<view :style="order=='price'?'color:'+themeColor:''">价格</view>
							<view class="ml05 wlkflex wrap align-content-between order">
								<view class="wd100">
									<u-icon name="arrow-up" bold size="5"
										:color="priceOrder=='asc'?themeColor:''"></u-icon>
								</view>
								<view class="wd100">
									<u-icon name="arrow-down" bold size="5"
										:color="priceOrder=='desc'?themeColor:''"></u-icon>
								</view>
							</view>
						</view>
						<view class="tab-item center" :style="any?'color:'+themeColor:''" @click="setRight(true)">筛选
						</view>
					</view>
				</view>
			</u-sticky>
			<u-popup :show='showRight' @close='setRight(false)' mode='right'>
				<view class="popup">
					<view class="title gray6 f30 pl20 pb20">筛选</view>
					<scroll-view class="list" scroll-y>
						<view v-for="(item,index) in tag" :key="index" class="mt50">
							<view class="t1 f30 pl40 pt10 fb">{{item.title}}</view>
							<view class="item d-s-c f-w mt25 pl30 pr30">
								<view @click="setName(index,i)" v-for="(e,i) in item.child" :key="i"
									:class="e.checked?'active white':''" class="i1 p10 f22 d-c-c tc m10">
									{{e.name}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="btn mt20 d-b-c tc p20">
						<view class="flex-1 mr10">
							<u-button text='重置' @click="reset" plain></u-button>
						</view>
						<view class="flex-1">
							<u-button text='确定' @click="setRight(false)" color='#FAC033'></u-button>
						</view>
					</view>
				</view>
			</u-popup>
			<block v-if="loadStatus=='nomore' && list.length==0">
				<view class="not-data">
					<u-empty :icon="uEmpty.search" text="没有搜索结果"></u-empty>
				</view>
			</block>
			<block v-else>
				<wlk-line-list :list="list"></wlk-line-list>
				<view class="load-more">
					<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
						:nomore-text="nomoreText" dashed line />
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var _self;
	import {
		toUrl
	} from '@/wlkutils/tools';
	import share from "@/wlkutils/share";
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['themeColor', 'uEmpty']),
			any() {
				return this.tag.some(item => item.child.some(e => e.checked))
			}
		},
		data() {
			return {
				type: '',
				lineType: null,
				merchid: null,
				ids: null,
				endcityid: '',
				keyword: '',
				list: [],
				page: 1,
				loadStatus: 'loading',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				order: 'default', //default 综合 sales 销量 price 价格 new 上新
				priceOrder: '', //价格排序 asc desc
				showRight: false,
				tag: [],
				tags: ''
			};
		},
		onLoad(options) {
			_self = this;
			if (options.endcityid) {
				_self.endcityid = options.endcityid
				_self.type = 'end'
			} else if (options.keyword) {
				_self.keyword = options.keyword
				_self.type = 'hotWord';
			} else if (options.lineType) {
				_self.type = 'lineType';
				_self.lineType = options.lineType;
			} else if (options.merchid) {
				_self.type = 'merchid';
				_self.merchid = options.merchid;
			}
			this.ids = this.$Route.query.ids ?? null;

			this.loadStatus = 'loading';
			this.page = 1;
			this.list = [];
			this.getData();
			this.getTag()
		},
		onShareAppMessage(res) {
			return share.setShareInfo();
		},
		onReachBottom() {
			if (this.loadStatus == "nomore") {
				return;
			}
			this.page++;
			this.getData();
		},
		methods: {
			reset() {
				this.tag.map(item => item.child.map(e => e.checked = false))
				this.page = 1;
				this.list = [];
				this.loadStatus = 'loading';
				this.getData()
				this.setRight(false)
			},
			setName(index, i) {
				this.tag[index].child[i].checked = !this.tag[index].child[i].checked
				let list = []
				this.tag.map(item => item.child.map(e => e.checked ? list.push(e.id) : ''))
				this.tags = list.join(',')
				this.page = 1;
				this.list = [];
				this.loadStatus = 'loading';
				this.getData()
			},
			setRight(bool) {
				this.showRight = bool
			},
			async getTag() {
				const res = await uni.$u.http.post("line/getTag")
				if (res.code == 1) {
					res.data.map(item => item.child.map(e => e.checked = false))
					this.tag = res.data
					console.log();
				}
			},
			changeOrder(v) {
				if (v == 'price') {
					if (uni.$u.test.isEmpty(this.priceOrder)) {
						this.priceOrder = 'asc';
					} else {
						this.priceOrder = this.priceOrder == 'asc' ? 'desc' : 'asc';
					}
				} else {
					this.priceOrder = '';
				}
				if (this.order != v || v == 'price') {
					this.order = v;
					this.page = 1;
					this.loadStatus = 'loading';
					this.list = [];
					this.getData();
				}
			},
			async getData() {
				const res = await uni.$u.http.post("line/getList", {
					endcityid: this.endcityid,
					keyword: this.keyword,
					type: this.type,
					lineType: this.lineType,
					merchid: this.merchid,
					ids: this.ids,
					page: this.page,
					order: this.order,
					priceOrder: this.priceOrder,
					tags: this.tags
				});
				if (res && res.data && res.data.rows) {
					this.list = this.list.concat(res.data.rows);
				}
				this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
			},
			jump(index) {
				toUrl('/pages/line/search?keyword=' + index + '&url=/pages/line/list');
			},
		},
	};
</script>

<style lang="scss">
	.popup {
		height: 100vh;
		width: 60vw;
		font-family: '黑体';

		.title {
			padding-top: 180rpx;
			background-color: #f6f6f6;

		}

		.list {
			height: 70vh;

			.i1 {
				background-color: #eee;
				height: 80rpx;
				border-radius: 20rpx;
				width: calc(50% - 20rpx);
			}

			.active {
				background-color: #fff4da;
				color: #f6c135;
				position: relative;

				&:before {
					content: "\ec9e";
					position: absolute;
					color: #fff;
					background-color: #FAC033;
					bottom: 0;
					right: 0;
					font-family: "iconfont";
					padding: 5rpx;
					font-size: 20rpx;
					border-radius: 8rpx;
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.line-content {
		.head-box {
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 20rpx 30rpx;

			.tab-item {
				width: 33.33%;
				font-size: $font-lt;

				.order {
					height: 25rpx;
					width: 24rpx;
				}
			}
		}
	}
</style>